<template>
	<div>
		<div class="header-title" style="position: fixed;top: 0;">
			<b :class="unfinishClick?'unfinishWork':''" @click="unFinish()">未完成</b>
			<b :class="!unfinishClick?'unfinishWork':''" @click="hasFinish()">已完成</b>
		</div>
		<SearchBar></SearchBar>
		<div class="order-content">
			<ul class="order-list order-list1" v-if="unfinishClick">
				<li v-for="(item,index) in value" :key=index @click='goInformation(item.id,item.fgOrderStatusLabel)'>
					<p class="first_p"><span>{{item.orderNo}}</span></p>
					<p class="second_p" style="margin-bottom: 0.85rem;"><span>{{!item.materialCount?0:item.materialCount}} 吨</span></p>
					<p class="four_p"><span class="statusColor" :class="item.fgOrderStatus | colorCode">{{item.fgOrderStatusLabel}}</span></p><img src="../../images/right.png">
				</li>
			</ul>
			<ul class="order-list order-list2" v-if="!unfinishClick">

			</ul>
			<div v-if='showNull'>
				<w-loadmore type="default" text="正在加载" style='margin-bottom: 3rem;' v-show='loading'></w-loadmore>
				<w-loadmore type="line" text="我是有底线的" style='margin-bottom: 3rem;' v-show='!loading'></w-loadmore>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../../components/common/footer'
	import SearchBar from '../../components/common/search'
	import {
		getStore
	} from '../../config/mUtils'
	import {
		getOrderList
	} from '../../config/api'
	import {
		Loadmore
	} from 'we-vue'
	export default {
		data() {
			return {
				value: [],
				loading: false,
				pageNumber: 1,
				pageSize: 5,
				SupplierId: getStore('SupplierId'),
				showNull: false,
				unfinishClick: true,
			}
		},
		mounted() {
			this.loadMore(this.SupplierId, this.pageNumber, this.pageSize)
			if (!this.value || this.value.length == 0) {
				this.showNull = true
			} else {
				this.showNull = false
			}
			document.body.addEventListener('scroll', this.onScroll,{passive:true})
		},
		filters: {
			colorCode(status) {
				if (status == 100 || status == 60) {
					return "firstColor"
				}
				if (status == 20 || status == 10 || status == 40 || status == 70) {
					return "secondColor"
				}
				if (status == 0) {
					return "thirdColor"
				}
				if (status == 110) {
					return "fourColor"
				}
			}
		},
		methods: {
			onScroll() {
				//可滚动容器的高度
				let innerHeight = document.querySelector('body').clientHeight + 50
				//屏幕尺寸高度
				let outerHeight = document.documentElement.clientHeight
				//可滚动容器超出当前窗口显示范围的高度
				let scrollTop = document.body.scrollTop
				//scroll在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight<(outerHeight+scrollTop)的情况，严格来讲，是接近底部
				if (innerHeight < (outerHeight + scrollTop)) {
					if (this.loading) {
						return
					} else {
						this.loading = !this.loading
						setTimeout(() => {		
							this.pageNumber++
							this.loadMore(this.SupplierId, this.pageNumber, this.pageSize)
							this.loading = !this.loading
						}, 1200)
						return 
					}
				}
			},
			loadMore(SupplierId, pageNumber, pageSize) {
				getOrderList(SupplierId, pageNumber, pageSize).then(res => {
					if (!res.content.orderList || this.value.length == res.content.totalCount) {
						document.body.removeEventListener('scroll', this.onScroll)
					} else {
						this.value = this.value.concat(res.content.orderList)
					}
				})
			},
			unFinish() {
				this.unfinishClick = !this.unfinishClick
			},
			hasFinish() {
				this.unfinishClick = !this.unfinishClick
			},
			goInformation(id,name){
				if(name=='待提交'){
					this.$router.push({
						path:'/waitsubmitOrder',
						query:{
							orderid:id
						}
					})
				}else{
					this.$router.push({
						path:'/orderInformation',
						query:{
							orderid:id
						}
					})
				}
			}
		},
		components: {
			Footer,
			SearchBar,
			'w-loadmore': Loadmore
		},
		beforeRouteLeave (to,from,next){   //离开路由的时候移除页面监听事件
			document.body.removeEventListener('scroll', this.onScroll)
			next()
		}
	}
</script>

<style scoped="scoped" lang="css">
	.unfinishWork {
		color: #28C81E;
		border-right: 1px solid #e2e2e2;
	}

	#searchBar {
		margin-top: 2.2rem;
		margin-bottom: 0.3rem;
	}

	.header-title b {
		width: 50%;
		float: left;
		box-sizing: border-box;
		font-size: 0.85rem;
		font-family: 'pfr';
		font-weight: normal;
	}
	.firstColor{
		border:1px solid #f65555;
		color:#f65555
	}
	.secondColor{
		border:1px solid #fdb96e;
		color:#fdb96e
	}
	.thirdColor{
		border:1px solid#28c81e;
		color:#28c81e
	}
	.fourColor{
		border:1px solid #777777;
		color:#777777
	}
</style>
